<div [ngSwitch]="view" class="views" (click)="$event.stopPropagation()">

    <div class="view" *ngSwitchCase="'main'" [@slideInLeft]>

        <!-- SIDENAV HEADER -->
        <div class="header px-24" [ngClass]="board.settings.color" fxLayout="column" fxLayoutAlign="center center">
            <div>Settings</div>
        </div>
        <!-- / SIDENAV HEADER -->

        <!-- SIDENAV CONTENT -->
        <div class="content py-16" fusePerfectScrollbar>

            <div class="nav material2">
                <div class="nav-item">
                    <div class="nav-link" matRipple (click)="view = 'board-color'">
                        <mat-icon class="nav-link-icon">format_color_fill</mat-icon>
                        <p class="title">Board Color</p>
                    </div>
                </div>

                <div class="nav-item">
                    <div class="nav-link" matRipple (click)="toggleCardCover()">
                        <mat-icon class="nav-link-icon">photo</mat-icon>
                        <p fxFlex class="title">Card Cover Images</p>
                        <mat-icon *ngIf="board.settings.cardCoverImages" class="s-18">check</mat-icon>
                    </div>
                </div>

                <div class="nav-item">
                    <div class="nav-link" matRipple (click)="toggleSubscription()">
                        <mat-icon class="nav-link-icon">remove_red_eye</mat-icon>
                        <p fxFlex class="title">Subscribe</p>
                        <mat-icon *ngIf="board.settings.subscribed" class="s-18">check</mat-icon>
                    </div>
                </div>

                <div class="nav-item">
                    <div class="nav-link" matRipple>
                        <mat-icon class="nav-link-icon">content_copy</mat-icon>
                        <p class="title">Copy Board</p>
                    </div>
                </div>

                <div class="nav-item">
                    <div class="nav-link" matRipple>
                        <mat-icon class="nav-link-icon">delete</mat-icon>
                        <p class="title">Delete Board</p>
                    </div>
                </div>

                <mat-divider></mat-divider>
            </div>
        </div>
        <!-- / SIDENAV CONTENT -->
    </div>

    <div class="view" *ngSwitchCase="'board-color'" [@slideInRight]>

        <!-- SIDENAV HEADER -->
        <div class="header px-24" [ngClass]="board.settings.color" fxLayout="row" fxLayoutAlign="space-between center">
            <div>Background Color</div>
            <button mat-icon-button (click)="view ='main'">
                <mat-icon class="s-16">arrow_back</mat-icon>
            </button>
        </div>
        <!-- / SIDENAV HEADER -->

        <!-- SIDENAV CONTENT -->
        <div class="content p-8" fusePerfectScrollbar>
            <scrumboard-board-color-selector></scrumboard-board-color-selector>
        </div>
        <!-- / SIDENAV CONTENT -->

    </div>
</div>
